<template>
  <div class="app-container">
    <MemberManageCilentEdit  ref="openMemberManageCilentEdit" @refresh="refresh"></MemberManageCilentEdit>
    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
      <el-form-item label="客户" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入客户"
          clearable
          @keyup.enter.native="enterClick"
        />
      </el-form-item>
     <el-form-item>
        <el-checkbox v-model="queryParams.all" label="显示所有客户" true-label="1" @change="getList"></el-checkbox>
        <el-checkbox v-model="queryParams.issell" label="显示同意代售" true-label="1" @change="getList"></el-checkbox>
        <el-checkbox v-model="queryParams.issh" label="显示预约出仓需要审核" true-label="1" @change="getList"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-descriptions title=" ">
      <el-descriptions-item label="客户数量合计">{{memberManageCilentCount.khsl}}</el-descriptions-item>
      <el-descriptions-item label="活跃客户合计">{{memberManageCilentCount.hykhsl}}</el-descriptions-item>
      <el-descriptions-item label="活跃客户占比">{{memberManageCilentCount.hykhbfb}}</el-descriptions-item>
    </el-descriptions>
    <el-table
      v-loading="loading"
      :data="memberManageCilentList"
    >
      <af-table-column fixed="left" label="操作" align="center" class-name="small-padding fixed-width" width="60">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="memberManageClientEdit(scope.row)"
            v-hasPermi="['zhcloud:shop:modify']"
          >修改</el-button>
        </template>
      </af-table-column> 
      <af-table-column prop="allname" label="客户" fixed="left"></af-table-column>
      <af-table-column prop="issellt" label="是否代售"></af-table-column>
      <af-table-column prop="issht" label="预约出仓审核"></af-table-column>
      <af-table-column prop="zt" label="是否停用" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.zt" active-color="#324157" inactive-color="#dcdfe6" active-value="停用状态" inactive-value="启用状态" @change="changeZt(scope.row)"></el-switch>
        </template>
      </af-table-column>
      <af-table-column prop="ssrqidn" label="到期日"></af-table-column>
      <af-table-column prop="isExpire" label="是否到期" class-name="text-danger"></af-table-column>
    </el-table>
     <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      /> 
  </div>
</template>

<script>
import { getMemberManageCilent, getMemberManageCilentCount, memberManageCilentModify } from "@/api/storage/memberManageCilent";
import MemberManageCilentEdit from './memberManageCilentEdit.vue'
import { formatDate, calculateDays } from '@/utils'

export default {
  name: "MemberManageCilent",
  components:{MemberManageCilentEdit},
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      //表格加载
      loading:true,
       //对齐
      labelPosition: "right",
      // 查询参数
      queryParams: {
        all: "",
        issell: "",
        issh: "",
        khmc: "",
        name: "",
        num: "",
        spckid: "",
        status: ""
      },
      formParams: {
        aid: "",
        issell: "",
        issh: "",
        line: "",
        zt: ""
      },
      // 会员管理客户列表
      memberManageCilentList: [],
      //总计
      memberManageCilentCount:"",
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  beforeRouteEnter(to, from, next) {
    const params = to.params
    next(vm => {   
      if(Object.keys(params).length > 0) {
        if(to.params.refresh == true) {
          vm.getList()
          vm.getMemberManageCilentCount()
        }
      }
    })
  },
  created() {
    this.getMemberManageCilentCount()
    this.getList()
  },
  methods: {
    /** 查询会员管理客户 */
    getList() {
      this.loading = true
      getMemberManageCilent(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        const data = response.rows
        const nowDate = formatDate(Date.now()).split(" ")[0]
        
        for(let i in data) {
          const ssrqidn = data[i].ssrqidn
          if(ssrqidn) {
            const days = calculateDays(nowDate, ssrqidn)
            data[i].isExpire = days <= 0?"已到期":""
          }
        }
        this.memberManageCilentList = response.rows
        this.total = response.total
        this.loading = false
      });
    },

    /** 查询会员管理客户 */
    getMemberManageCilentCount() {
      getMemberManageCilentCount({}).then(response => {
        this.memberManageCilentCount = response.data;
      });
    },

    /**修改 */
    memberManageClientEdit(row) {
      const data = JSON.parse(JSON.stringify(row))
      this.$refs.openMemberManageCilentEdit.open(data)
    },
    /**启停管理客户 */
    changeZt(row) {
      const issell = row.issellt == "是"?"1":"0"
      const issh = row.issht == "是"?"1":"0"
      this.formParams = {
        aid: row.id,
        issell: issell,
        issh: issh,
        line: row.line,
        zt: row.zt
      }
      this.changeZtEdit()
    },

    /**修改启停 */
    changeZtEdit() {
      this.$modal.loading("数据正在修改中，请稍等...")
      memberManageCilentModify(this.formParams).then(response => {
        this.$modal.closeLoading()
        this.getList()
      }).catch(()=> {
        this.$modal.closeLoading()
      })
    },

    refresh() {
      this.getList()
    },

    /**enter键触发 */
    enterClick(e) {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.getMemberManageCilentCount()
      this.getList()
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
  }
};
</script>
